<template>
  <div class="container" @click="clickHandle('test click', $event)">

   <div class="userinfo" @click="bindViewTap">
      <img class="userinfo-avatar" v-if="userInfo.avatarUrl" :src="userInfo.avatarUrl" background-size="cover" />
      <div class="userinfo-nickname">
				你好:<card :text="userInfo.nickName"></card>
      </div>
    </div>

    <div class="usermotto" @click="turnToMine">
      <div class="user-motto">
      <card :text="motto"></card>
      </div>
    </div>
      

  </div>
</template>

<script>
import card from '@/components/card'

export default {
  data () {
    return {
      motto: '个人简历',
      userInfo: {}
    }
  },

  components: {
    card
  },

  methods: {
    turnToMine () {
      const url = '../mine/mine'
      wx.switchTab({ url })
    },
    bindViewTap(){
     	 const url = '../logs/logs'
      wx.navigateTo({ url })
     },
    getUserInfo () {
      // 调用登录接口
      wx.login({
        success: () => {
          wx.getUserInfo({
            success: (res) => {
              this.userInfo = res.userInfo
            }
          })
        }
      })
    },
    clickHandle (msg, ev) {
      console.log('clickHandle:', msg, ev)
    }
  },

  created () {
    // 调用应用实例的方法获取全局数据
    this.getUserInfo()
  }
}
</script>

<style scoped>
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
  display: flex;
  flex-direction: row;
}

.usermotto {
	position: absolute;
	bottom: 10%;
  margin-top: 250px;
}

.form-control {
  display: block;
  padding: 0 12px;
  margin-bottom: 5px;
  border: 1px solid #ccc;
}
.container{
	width:100%; height: 400px; 
	/*background: url("http://images.gaga.me/photos2/2018/0311/5aa54caeb13ad.jpeg") no-repeat;*/
	background-size:100%  100%;
}

</style>
